<template>
  <div>
    <div>
      <search-form
        :search-config="searchConfig"
        :label-width="150"
        @clear="clearSearch"
        @search="handleSearch"
      />
      <table-box
        ref="refTable"
        table-size="mini"
        :table-config="tableConfig"
        show-selection
        dragable
        :selected-arry.sync="tableSelected"
        :other-filters="otherFilters"
        @btnOperate="btnOperate"
        @selection-change="selectionChangeHandle"
      />
    </div>
    <edit-form v-if="showEdit" :detail-data="activeData" :visible.sync="showEdit" @success="refreshTable" />
    <div>
      <import-files v-if="importVisible" title="导入" :visible.sync="importVisible" :config="fileImportConfig" @success="refreshTable" />
      <export-files v-if="exportVisible" title="导出" :config="exportConfig" :visible.sync="exportVisible" />
    </div>
  </div>
</template>
<script>
import editForm from './editForm.vue'
import { deleteBatch } from '@/api/seriesStandardColor'
export default {
  name: 'SeriesStandardColor',
  components: { editForm },
  data() {
    return {
      exportVisible: false,
      importVisible: false,
      tableSelected: [],
      // otherFilters: [],
      activeData: {},
      otherFilters: [],
      activeDataId: '',
      showEdit: false,
      searchConfig: [
        { label: '系列编码', prop: 'seriesCode', placeholder: '', filter: true },
        {
          type: 'select',
          prop: 'mainProductName',
          label: '主选产品',
          filter: true,
          config: {
            filterable: false,
            remoteUrl: '/data-dict/api/v2/dictionary/MAIN_PRODUCTS?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        { label: '柜体可选配色', prop: 'cabinetColorName', placeholder: '', filter: true },
        { label: '门板可选配色', prop: 'doorColorName', placeholder: '', filter: true }
      ],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/seriesStandardColor/page`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 0,
        pageSize: 10,
        order: 'desc',
        sort: '',
        // 表格字段动态配置
        setting: [
          {
            prop: 'seriesCode',
            label: '系列编码',
            minWidth: '140'
          },
          {
            prop: 'seriesName',
            label: '系列名称',
            minWidth: '150'
          }, {
            prop: 'mainProductName',
            label: '主选产品',
            minWidth: '110'
          },
          {
            prop: '',
            label: '可选配色',
            minWidth: '150',
            formatData: ({ cabinetColorName, doorColorName }) => {
              return cabinetColorName || doorColorName
            }
          },
          // {
          //   prop: 'cabinetColorName',
          //   label: '柜体颜色名称',
          //   minWidth: '150'
          // },
          // {
          //   prop: 'doorColorName',
          //   label: '门板颜色名称',
          //   minWidth: '150'
          // },
          {
            prop: 'isCheck',
            label: '是否默认勾选',
            minWidth: '150',
            formatData: ({ isCheck }) => {
              return isCheck ? '是' : '否'
            }
          }, {
            prop: 'isUp',
            label: '是否必上',
            minWidth: '150',
            formatData: ({ isUp }) => {
              return isUp ? '是' : '否'
            }
          }, {
            prop: 'enable',
            label: '启用状态',
            minWidth: '150',
            render: function(createElement, rows) {
              if (rows.enable === 1 || rows.enable === 0) {
                return (<div>
                  <svg-icon class={rows.enable === 1 ? 'icon-on' : 'icon-off'}
                    icon-class={rows.enable === 1 ? 'zhengquewancheng-line' : 'jinzhi'}></svg-icon>
                  {rows.enable === 1 ? '启用' : rows.enable === -1 ? '失效' : '停用' }
                </div>
                )
              }
              return ''
            }
          }
        ],
        btnList: this.isProduction ? null : [{
          buttonName: '新增',
          outerFlag: true,
          optCode: 'add'
        },
        {
          buttonName: '编辑',
          outerFlag: true,
          optCode: 'edit'
        },
        {
          buttonName: '删除',
          outerFlag: true,
          optCode: 'del'
        },
        {
          buttonName: '导入',
          outerFlag: true,
          optCode: 'import'
        },
        {
          buttonName: '导出',
          outerFlag: true,
          optCode: 'export'
        }
        ]
      }
    }
  },
  computed: {
    exportConfig() {
      return [{
        code: 'export',
        name: '系列标配色',
        dataApi: '/slm-admin/api/v1/seriesStandardColor/export',
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'seriesCode'
      }
      // ,
      // {
      //   code: 'exportTemplate',
      //   name: '系列标配色模板',
      //   async: false,
      //   templateMethod: 'post',
      //   templateApi: '/slm-admin/api/v1/seriesStandardColor/template'
      // }
      ]
    },
    fileImportConfig() {
      return [{
        code: 'code',
        name: '新增系列标配色',
        async: false,
        apiUrl: '/api/v1/seriesStandardColor/importExcel'
      }]
    }
  },
  async  created() {
  },
  methods: {
    // 清空搜索数据
    clearSearch() {
    },
    // 设置表格多选行高亮
    tableRowClassName({ row, rowIndex }) {
      const filterArr = this.tableSelected.filter(item => item.id === row.id)
      return filterArr.length > 0 ? 'selected-highlight' : ''
    },
    refreshTable(flag) {
      this.$refs.refTable.initTableData(!!flag)
    },
    // 获取搜索条件
    handleSearch(data) {
      this.otherFilters = [...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.refTable.initTableData()
      })
    },
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'del':
          if (!this.singleJudge(this.tableSelected, '删除', false)) {
            return
          }
          this.handleDelete(this.tableSelected)
          break
        case 'import':
          this.handleImport()
          break
        case 'export':
          this.handleExport()
          break
        default:
          break
      }
    },
    handleImport() {
      this.importVisible = true
    },
    handleExport() {
      this.exportVisible = true
    },
    handleDelete(data) {
      const list = data.map(v => v.id)
      deleteBatch(list).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.refreshTable()
        }
      })
    },
    // 新增/编辑
    handleEdit(data) {
      if (data && data.id) {
        this.activeData = data
      } else this.activeData = {}
      this.showEdit = true
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    }
  }
}
</script>
